<!-- 涟漪按钮 -->

<template>
    <div class="but-ripples-root" @click="cur_clickEvent" :style="props.isHidden ? 'overflow: hidden;' : ''">
        <div class="item-shadow" :class="curCss"></div>
        <span style="z-index: 999;">{{ props.text }}</span>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, ref } from "vue";
import { useUserStores } from "@/stores/index.js";
const userStores = useUserStores();


const props = defineProps({
    text: String,           //按钮文字
    curIndex: Number,       //按钮的下标
    isHidden: Boolean,      //是否开启遮挡效果
});
const emits = defineEmits(['click']);

const curCss = ref('');
const config = userStores.getConfigAction();
//用于下面的v-bind绑定
const backImage = 'url("' + config.tabBarImage + '")';


const cur_clickEvent = (e) => {
    emits('click', props.curIndex);
    curCss.value = 'item-shadow-show';
    setTimeout(() => {
        curCss.value = '';
    }, 1500);
}

</script>

<style scoped lang="scss">
.but-ripples-root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;


    .item-shadow {
        position: absolute;
        // transform: translate(-50%, -50%);//使用这个会导致图片错位
    }

    .item-shadow-show {
        // background-color: rgba(0, 0, 0, 0.1);
        background-image: v-bind(backImage);
        background-attachment: fixed;
        background-position: 0% 47%;
        background-size: 100%;

        animation: item-shadow-anime 1.3s;
        border-radius: 500px;
    }

    @keyframes item-shadow-anime {
        0% {
            width: 0%;
            height: 0%;
            opacity: 0;
        }

        25% {
            opacity: 1;
        }

        75% {
            opacity: 1;
        }

        100% {
            width: 300px;
            height: 300px;
            opacity: 0;
        }
    }
}
</style>